<template>
	<view style="width: 100vw;height: 100vh;overflow: hidden;">
		<!-- 		<view v-for="(item, index) in dataInfo" :key="index">
			{{ item }}
		</view> -->
		<view class="settlement-1 background-f ">
			<div class="flex">
				<view class="settlement-1-text">
					*若已有《工会法人资格证书》请使用职工之家APP首页“数字身份卡包”中“申请组织身份证”功能提交申请。
				</view>
				<image class="settlement-1-img" src="@/static/images/ruzhu.png">
				</image>
			</div>

		</view>
		<view class="settlement-2 background-f margin-b">
			<view class="settlement-2-img">
				基本信息
			</view>
			<!-- <img class="settlement-2-img" src="../../static/images/ruzhubeijing.png" alt="" /> -->
			<uni-forms :modelValue="formData" label-position="top" label-width="auto" :rules="rules">
				<uni-forms-item label="申请人姓名" name="applyUser" required
					style=" border-bottom: 1rpx solid #e5e5e5;padding-top: 30rpx;margin-top: 30rpx;">
					<view class="form-item-content">
						<label class="form-item-label">姓名</label>
						<input type="text" class="form-item-input" v-model="formData.applyUser" placeholder="请输入姓名" />
					</view>
				</uni-forms-item>
				<uni-forms-item label="联系电话" name="applyPhone" required
					style="padding: 30rpx; border-bottom: 1rpx solid #e5e5e5;">
					<view class="form-item-content">
						<label class="form-item-label">联系电话</label>
						<input type="text" class="form-item-input" v-model="formData.applyPhone"
							placeholder="请输入电话号码" />

					</view>
				</uni-forms-item>
				<uni-forms-item label="身份证号码" name="applyIdCard" required style="padding: 30rpx; ">
					<view class="form-item-content">
						<label class="form-item-label">身份证号码</label>
						<input type="text" class="form-item-input" v-model="maskedIdCard" placeholder="请输入身份证号码" />
					</view>
				</uni-forms-item>
			</uni-forms>
		</view>
		<view class="settlement-3 background-f" style="padding: 12rpx 0 ;">
			<view class="settlement-3-text">
				<image style="width: 45rpx;height: 60rpx;transform: translate(-145%, 30%);"
					src="../../static/images/leftjiantou.png" alt=""></image>
				请选择入驻类型
				<image style="width: 45rpx;height: 60rpx;transform: translate(145%, 30%);"
					src="../../static/images/rightjaintou.png" alt=""></image>
			</view>
			<view class="flex type1" style="margin: 32rpx 32rpx;box-shadow: 0px 2px 4px  rgba(0, 0, 0, 0.25);"
				@click="gounionsettlementform(1)">
				<view class="flex1 type1-text text">企业、事业单位、机关、社会组织单独或联合建立的工会委员会</view>
				<image src="../../static/images/ruzhuleixing-1.png" mode="" class="settlement-3-img"></image>
			</view>
			<view class="flex type2" style="margin: 32rpx 32rpx;box-shadow: 0px 2px 4px  rgba(0, 0, 0, 0.25);"
				@click="gounionsettlementform(2)">
				<image src="../../static/images/ruzhuleixing-2.png" mode="" class="settlement-3-img"
					style="margin: 0;margin-left: 45rpx;"></image>
				<view class="flex1 type2-text text">乡镇（街道）工会、开发区（工业园区）工会、村（社区）工会</view>
			</view>
			<view class="flex type3" style="margin: 32rpx 32rpx;box-shadow: 0px 2px 4px  rgba(0, 0, 0, 0.25);"
				@click="gounionsettlementform(3)">
				<view class="flex1 type1-text text">市级、县级及县级以下建立的其他区域（行业）工会组织</view>
				<image src="../../static/images/ruzhuleixing-3.png" mode="" class="settlement-3-img"></image>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		removePagesToken,
		setPagesToken
	} from '../../utils/auth';
	export default {
		data() {
			return {
				formData: {
					applyUser: "",
					applyPhone: "",
					applyIdCard: "",
				},
				dataInfo: [],
				unionsettlement: null,
				rules: {
					applyUser: {
						rules: [{
							required: true,
							errorMessage: '姓名不能为空',
						}]
					},
					applyPhone: {
						rules: [{
							required: true,
							errorMessage: '联系电话不能为空',
						}]
					},
					applyIdCard: {
						rules: [{
							required: true,
							errorMessage: '身份证号码不能为空',
						}]
					}
				}
			}
		},
		onShow() {
			removePagesToken('OrganizationalForm')
			this.loadUserInfo();
		},
		computed: {
			maskedIdCard() {
				const idCard = this.formData.applyIdCard;
				// 假设掩码规则是只显示前6位和后4位
				return idCard ?
					idCard.replace(/^(\d{6})\d+(\d{4})$/, '$1********$2') :
					'';
			}
		},
		methods: {
			// 获取用户信息
			loadUserInfo() {
				const {
					platform
				} = uni.getSystemInfoSync();
				const isMobile = platform === 'ios' || platform === 'android';
				const credentials = '(MembersCredential|WorkerMembersCredential)&PhoneNumberCredential';

				this.userTopAuth(isMobile, credentials)
					.then(res => {
						this.setFormData(res);
					})
					.catch(err => {
						this.setFormData(err);
					});
			},
			setFormData(data) {
				this.unionsettlement = data;
				this.dataInfo.push(data);


				const credential = this.unionsettlement.WorkerMembersCredential || this.unionsettlement.MembersCredential;

				if (credential) {
					this.formData.applyUserDid = credential.userDid;
					this.formData.applyIdCard = credential.idNumber;
					this.formData.applyUser = credential.name;
				} else {
					this.formData.applyUserDid = null;
					this.formData.applyIdCard = null;
					this.formData.applyUser = null;
				}

				if (this.unionsettlement.PhoneNumberCredential) {
					this.formData.applyPhone = this.unionsettlement.PhoneNumberCredential.mobileNumber;
				} else {
					this.formData.applyPhone = null;
				}
			},

			gounionsettlementform(type) {
				console.log(this.formData);
				removePagesToken('OrganizationalForm')
				setPagesToken('OrganizationalForm', this.formData)
				this.$tab.navigateTo(`/pages/work/unionsettlement-form?type=${type}`)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.background-f {
		margin: 32rpx !important;
		border-radius: 20rpx;
	}

	.settlement-1 {
		margin: 16rpx 0;
		overflow: hidden;

		.settlement-1-text {
			flex: 1;
			font-size: 10px;
			color: rgba(212, 48, 48, 1);
			text-align: justify;
			vertical-align: top;
			padding-left: 36rpx;
		}

		.settlement-1-img {
			width: 342rpx;
			height: 196rpx;
		}
	}

	.settlement-2 {
		position: relative;
		background: linear-gradient(135deg, rgba(255, 255, 255, 1) 0%, rgba(255, 245, 248, 1) 100%);
		border: 2px solid rgba(189, 26, 45, 1);


		.settlement-2-img {
			background-image: url('../../static/images/ruzhubeijing.png');
			background-size: 100% 100%;
			background-repeat: no-repeat;
			width: 460rpx;
			height: 70rpx;
			position: absolute;
			top: -22rpx;
			left: 50%;
			transform: translateX(-50%);
			z-index: 2;
			color: #fff;
			text-align: center;
			font-size: 32rpx;
			line-height: 75rpx;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.uni-forms-item__content {
			width: 80%;
		}

		.uni-forms-item {
			display: flex;
			align-items: center;
			margin: 0;

			margin-bottom: 16rpx;
			padding: 32rpx 0;

			.form-item-content {
				display: flex;
				align-items: center;
				width: 100%;
			}

			.form-item-label {
				margin-right: 10rpx;
				font-size: 14px;
				font-weight: 700;
				color: rgba(51, 51, 51, 1);
				width: 200rpx;
			}

			.form-item-input {
				text-align: right;
				flex: 1;
				margin-left: 40rpx;
				border: none;
				background: none;
				box-shadow: none;
				border-radius: 4rpx;
				// padding: 8rpx;
				font-size: 14px;
			}
		}

		::v-deep .uni-forms-item__label {
			display: none; // Hide default label if using custom labels
		}
	}

	.settlement-3 {

		.settlement-3-text {
			width: 342rpx;
			height: 100rpx;
			font-size: 32rpx;
			line-height: 100rpx;
			letter-spacing: 0px;
			color: rgba(51, 51, 51, 1);
			text-align: center;
			vertical-align: top;
			margin: 0 auto;
			margin-bottom: -10rpx;
			margin-top: 10rpx;
			background-image: url('../../static/images/ruzhuleixingback.png');
			background-size: 100% 70%;
			background-repeat: no-repeat;
			background-position: center center;
			color: #fff;
		}

		.settlement-3-img {
			width: 160rpx;
			height: 160rpx;
			margin-right: 45upx;
		}

		.type1 {
			background: linear-gradient(90deg, rgba(235, 171, 255, 1) 0%, rgba(118, 179, 255, 1) 100%);
			border-radius: 10px;
		}

		.type2 {
			background: linear-gradient(90deg, rgba(255, 205, 173, 1) 0%, rgba(255, 142, 120, 1) 100%);
			border-radius: 10px;
		}

		.type3 {
			background: linear-gradient(90deg, rgba(255, 167, 89, 1) 0%, rgba(255, 244, 143, 1) 100%);
			border-radius: 10px;
		}

		.text {
			font-size: 14px;
			font-weight: 500;
			letter-spacing: 0px;
			line-height: 20.27px;
			color: rgba(255, 255, 255, 1);
			text-align: left;
			vertical-align: top;
		}

		.type1-text {
			margin-left: 48rpx;
		}

		.type2-text {
			margin-right: 48rpx;
		}
	}

	.settlement-3>view {
		margin-bottom: 60rpx;
	}
</style>